<template>
  <div>
    <my-header></my-header>
    <!-- 中间部分 -->
    <div class="content">
      <!-- 背景图100%定位 -->
      <div class="background_image"></div>
      <!--主体-->
      <div class="container">
        <!-- 面包屑导航 -->
        <div class="crumbs">
          <span><router-link to="/">结婚</router-link> ></span>
          <span><i> 结婚攻略</i></span>
        </div>
        <!--导航栏-->
        <div class="box clearfix">
          <div class="box_left clearfix" @mouseover="jumpList">
            <dl>
              <dt>婚前必看</dt>
              <dd><router-link :to="`/list/${subcat}`">见家长</router-link></dd>
              <dd><router-link :to="`/list/${subcat}`">求婚</router-link></dd>
              <dd>
                <router-link :to="`/list/${subcat}`">结婚登记</router-link>
              </dd>
              <dd><router-link :to="`/list/${subcat}`">吉日</router-link></dd>
              <dd><router-link :to="`/list/${subcat}`">订婚</router-link></dd>
              <dd>
                <router-link :to="`/list/${subcat}`">婚前准备</router-link>
              </dd>
              <dd><router-link :to="`/list/${subcat}`">彩礼</router-link></dd>
              <dd><router-link :to="`/list/${subcat}`">习俗</router-link></dd>
              <dd><router-link :to="`/list/${subcat}`">法规</router-link></dd>
            </dl>
            <dl>
              <dt>备婚中</dt>
              <dd>
                <router-link :to="`/list/${subcat}`">婚纱摄影</router-link>
              </dd>
              <dd>
                <router-link :to="`/list/${subcat}`">婚纱礼服</router-link>
              </dd>
              <dd>
                <router-link :to="`/list/${subcat}`">婚宴酒店</router-link>
              </dd>
              <dd>
                <router-link :to="`/list/${subcat}`">婚庆公司</router-link>
              </dd>
              <dd><router-link :to="`/list/${subcat}`">司仪</router-link></dd>
              <dd><router-link :to="`/list/${subcat}`">跟妆</router-link></dd>
              <dd><router-link :to="`/list/${subcat}`">婚车</router-link></dd>
              <dd>
                <router-link :to="`/list/${subcat}`">结婚用品</router-link>
              </dd>
              <dd><router-link :to="`/list/${subcat}`">请柬</router-link></dd>
            </dl>
            <dl>
              <dt>举行婚礼</dt>
              <dd>
                <router-link :to="`/list/${subcat}`">婚房布置</router-link>
              </dd>
              <dd>
                <router-link :to="`/list/${subcat}`">婚礼布置</router-link>
              </dd>
              <dd>
                <router-link :to="`/list/${subcat}`">新郎新娘</router-link>
              </dd>
              <dd>
                <router-link :to="`/list/${subcat}`">婚礼音乐</router-link>
              </dd>
              <dd>
                <router-link :to="`/list/${subcat}`">婚礼致辞</router-link>
              </dd>
              <dd>
                <router-link :to="`/list/${subcat}`">结婚誓言</router-link>
              </dd>
              <dd>
                <router-link :to="`/list/${subcat}`">婚礼游戏</router-link>
              </dd>
              <dd>
                <router-link :to="`/list/${subcat}`">结婚祝福</router-link>
              </dd>
            </dl>
          </div>
          <div class="box_right">
            <a href="javascript:;"
              ><img src="../../public/img/yuanzj/strategy_index/email.png"
            /></a>
          </div>
        </div>
        <!--推荐标签-->
        <div class="recommend">
          <p><i></i>大家都在看</p>
          <div>
            <a
              href="javascript:;"
              class="recommendcon"
              v-for="(bq, i) in randomlabel.slice(0, 5)"
              :key="i"
              >{{ bq.label.slice(0, bq.label.indexOf(",")) }}
              <img
                v-show="bq.scan >= 6500"
                src="../../public/img/yuanzj/strategy_index/hot.png"
            /></a>
            <a href="javascript:;" class="clearfix">查看更多<i></i></a>
          </div>
        </div>
        <!--分类导航-->
        <div class="title">
          <ul>
            <li
              :class="{ cate: yzj_active == i }"
              v-for="(fl, i) in allcategory.slice(0, 9)"
              :key="i"
              @mouseenter="changeCategory(i)"
            >
              <router-link :to="`/list/${fl.category}`">{{
                fl.category
              }}</router-link>
            </li>
          </ul>
          <!-- 图文导航 -->
          <div
            class="title_img"
            v-show="yzj_active == i"
            v-for="(ztw, i) in titleimgs"
            :key="i"
          >
            <dl v-for="(tw, ii) in ztw.slice(0, 4)" :key="ii">
              <dt>
                <router-link :to="`/scontent/${tw.yid}`"
                  ><img :src="tw.pic"
                /></router-link>
              </dt>
              <dd>
                <router-link :to="`/scontent/${tw.yid}`">{{
                  tw.title
                }}</router-link>
              </dd>
            </dl>
          </div>
        </div>
        <!--文章列表及热榜-->
        <div class="art_hot">
          <!--左列总榜-->
          <div class="lis">
            <!-- 列表标题 -->
            <div class="topic">
              <span class="yzj_active"
                ><a href="javascript:;">精选文章</a></span
              >
              <span><a href="javascript:;">最新文章</a></span>
            </div>
            <!-- 精选文章列表 -->
            <ul
              class="artlist clearfix"
              v-for="(wz, i) of bestlist.slice(
                (page - 1) * pagesize,
                (page - 1) * pagesize + 5
              )"
              :key="i"
            >
              <li>
                <router-link :to="`/scontent/${wz.yid}`"
                  ><img :src="wz.pic" alt=""
                /></router-link>
              </li>
              <li class="title" @scroll="addScan(wz.scan, wz.yid)">
                <router-link
                  class="subcat"
                  :to="`/list/${wz.subcat}`"
                 
                  >{{ wz.subcat }}</router-link
                >
                <router-link
                  :to="`/scontent/${wz.yid}`"
                  class="stitle"
                 
                  >{{ wz.title }}</router-link
                >
              </li>
              <li class="time_scan">
                <span>发布日期：{{ wz.sendtime.slice(0, 10) }}</span>
                <span class="scan"><i></i>{{ wz.scan }}</span>
              </li>
              <li class="text">
                <router-link :to="`/scontent/${wz.yid}`">{{
                  wz.content.replace(/\<[^>]+\>/g, "")
                }}</router-link>
              </li>
              <li class="slabel">
                <span
                  v-for="(bq, i) of wz.label.split(',')"
                  :key="i"
                  v-show="bq"
                >
                  <img
                    src="https://qnm.hunliji.com/o_1dd2jt52d1tebdn0kd61tdc1qd3e.png"
                    alt=""
                  />
                  <a href="javascript:;">{{ bq }}</a>
                </span>
              </li>
            </ul>
            <!--分页-->
            <div class="page">
              <ul>
                <li v-show="page != 1" @click="jumpPage(page-1)">
                  <a href="javascript:;">< 上一页</a>
                </li>
                <li
                  v-for="(p, i) in pagearr"
                  :key="i"
                  :class="{ dot: '...' == p, yzj_active: page == p }"
                  @click="jumpPage(p)"
                >
                  <a href="javascript:;">{{ p }}</a>
                </li>
                <li v-show="page != pagecount" @click="jumpPage(page+1)">
                  <a href="javascript:;">下一页 ></a>
                </li>
              </ul>
            </div>
            <!--推荐标签-->
            <div class="recommend">
              <p><i></i>猜你想找</p>
              <div>
                <a
                  href="javascript:;"
                  v-for="(bq, i) in randomlabel2.slice(0, 6)"
                  :key="i"
                  >{{ bq.label.slice(0, bq.label.indexOf(",")) }}
                  <img
                    v-show="bq.scan >= 6500"
                    src="../../public/img/yuanzj/strategy_index/hot.png"
                /></a>
                <a href="javascript:;" class="clearfix">查看更多<i></i></a>
              </div>
            </div>
            <!--旅拍banner图-->
            <div class="yzj_banner">
              <div id="btn-left"></div>
              <ul id="ul-imgs" style="width: 3280px; margin-left: 0px">
                <li>
                  <a href="javascript:;"
                    ><img
                      src="https://qnm.hunliji.com/o_1d5tu601abo4ujf10gjb481b6c9.jpg"
                  /></a>
                </li>
                <li>
                  <a href="javascript:;"
                    ><img src="https://z3.ax1x.com/2021/03/21/65mt81.jpg"
                  /></a>
                </li>
                <li>
                  <a href="javascript:;"
                    ><img src="https://z3.ax1x.com/2021/03/21/65mDVe.jpg"
                  /></a>
                </li>
                <li>
                  <a href="javascript:;"
                    ><img
                      src="https://qnm.hunliji.com/o_1d5tu601abo4ujf10gjb481b6c9.jpg"
                  /></a>
                </li>
              </ul>
              <ul id="ul-idxs">
                <li class="yzj_active"></li>
                <li></li>
                <li></li>
              </ul>
              <div id="btn-right"></div>
            </div>
          </div>
          <!--右列热榜-->
          <div class="hot_list">
            <h6>近期热门top榜</h6>
            <ul>
              <li v-for="(rb, i) in hotlist.slice(0, 10)" :key="i">
                <span>{{ i + 1 }}</span>
                <router-link
                  :to="`/scontent/${rb.yid}`"
                  class="text-truncate"
                 
                  >{{ rb.title }}</router-link
                >
                <span><i></i>{{ rb.scan }}</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <my-footer></my-footer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      subcat: "",
      randomlabel: [],
      randomlabel2: [],
      yzj_active: 0,
      allcategory: [],
      titleimgs: [],
      bestlist: [],
      bestlabel: [],
      hotlist: [],
      page: 1,
      pagesize: 6,
      total: 0, //总条数
      pagecount: 0, //总页码
      pagearr: [],
      pageswitch:true,
    };
  },

  methods: {
    loadTitle(){
      document.title="结婚攻略_婚礼攻略_结婚筹备攻略【婚礼纪】";
    },
    // 点击跳转到对应子类的文章列表
    jumpList(e) {
      this.subcat = e.target.innerText;
    },

    // 封装查询任意标签
    loadLabel(callback) {
      // 通过axios  发送ajax请求，访问类别列表
      this.axios.get("/strategy/randomlabel").then((res) => {
        let randomla = [];
        res.data.forEach((bq) => {
          if (bq.label) {
            randomla.push(bq);
          }
        });
        callback(randomla);
      });
    },

    // 加载大家都在看标签
    loadRandomlabel() {
      this.loadLabel((randomla) => {
        this.randomlabel = randomla;
      });
    },

    // 加载猜你想找标签
    loadRandomlabel2() {
      this.loadLabel((randomla) => {
        this.randomlabel2 = randomla;
      });
    },

    // 加载分类标题 请求图文数据
    loadCategory() {
      // 通过axios  发送ajax请求，访问类别列表
      this.axios.get("/strategy/category").then((res) => {
         this.allcategory = res.data;
        //  一次请求所有数据，然后根据9个标题分别过滤对应数组，push到大数组
				this.axios.get("/strategy/titleimg").then((result)=>{
					
					this.allcategory.forEach(item=>{
						var arr=result.data.filter(k=>{
							return k.category==item.category;
						})
						this.titleimgs.push(arr);
					})
				})
      });
    },

    // 移入切换图文导航内容
    changeCategory(i) {
      this.yzj_active = i;
    },

    // 加载精选文章列表和分页
    loadBestlist() {
      this.axios.get(`/strategy/bestlist`).then((res) => {
        res.data.forEach((wz) => {
          if (wz.pic) {
            wz.pic = `${wz.pic}`;
          }
          if (wz.scan >= 100000) {
            wz.scan = `${parseInt(wz.scan / 100000) * 10}w+`;
          }
        });
        this.bestlist = res.data;
        // 先加载文章，才能加载分页
        this.loadPage();
      });
    },

    // 封装分页
    loadPage() {
      // 先加载文章，才能加载分页
      this.total = this.bestlist.length;
      this.pagecount = Math.ceil(this.total / this.pagesize);
      let arr = [];
      for (let i = 1; i <= this.pagecount; i++) {
        arr.push(i);
      }
      if (this.pagecount <= 5) {

      } else if (this.page <= 3) {
        arr = [1, 2, 3, 4, 5, "...", this.pagecount];

      } else if (this.pagecount - this.page <= 2) {
        arr = [1,"...", this.pagecount-4, this.pagecount-3, this.pagecount-2, this.pagecount-1, this.pagecount,];

      } else {
        arr = [1,"...",this.page-2, this.page-1, this.page, this.page+1, this.page+2, "...", this.pagecount,];
      }
      this.pagearr = arr;
    },

    // 点击跳转到对应页码,增加防抖
    jumpPage(p) {
      if(this.pageswitch){
        if(p!="..."){
          this.page=p;
      	  this.loadBestlist();
			    window.scrollTo(0,700);
          this.pageswitch=false;
          setTimeout(()=>{
            this.pageswitch=true
          },1000)
        }	
      }
    },

    // 加载热门top榜
    loadHotlist() {
      this.axios.get("/strategy/hotlist").then((res) => {
        this.hotlist = res.data;
      });
    },

    // 加载轮播图
    loadBanner() {
      let i = 0;
      let LIWIDTH = 820;
      let LICOUNT = 3;
      let duration = 500;
      let ulImgs = document.getElementById("ul-imgs");
      let ulIdxs = document.getElementById("ul-idxs");
      let lis = ulIdxs.children;
      // i滑动
      function moveTo(to) {
        if (to == undefined) {
          to = i + 1;
        }
        if (i == 0) {
          ulImgs.className = "transition";
        }
        if (i == 0) {
          if (to > i) {
            ulImgs.className = "transition";
          } else {
            ulImgs.className = "";
            ulImgs.style.marginLeft = -LIWIDTH * LICOUNT + "px";
            setTimeout(function () {
              moveTo(LICOUNT - 1);
            }, 100);
            return;
          }
        }
        i = to;
        ulImgs.style.marginLeft = -i * LIWIDTH + "px";
        for (var li of lis) {
          li.className = "";
        }
        if (i == LICOUNT) {
          i = 0;
          setTimeout(function () {
            ulImgs.className = "";
            ulImgs.style.marginLeft = 0;
          }, duration);
        }
        lis[i].className = "yzj_active";
      }
      //左右按钮
      let btnLeft = document.getElementById("btn-left");
      let btnRight = document.getElementById("btn-right");
      var canClick = true;
      btnRight.onclick = function () {
        move(1);
      };
      function move(n) {
        if (canClick) {
          moveTo(i + n);
          canClick = false;
          setTimeout(function () {
            canClick = true;
          }, duration + 100);
        }
      }
      btnLeft.onclick = function () {
        move(-1);
      };
      // 循环
      let interval = 3000;
      let timer = setInterval(function () {
        moveTo();
      }, interval);
      let banner = document.getElementsByClassName("yzj_banner")[0];
      banner.onmouseover = function () {
        clearInterval(timer);
      };
      banner.onmouseout = function () {
        timer = setInterval(function () {
          moveTo();
        }, interval);
      };
      // 小圆点
      ulIdxs.onclick = function (e) {
        if (canClick) {
          var li = e.target;
          if (li.nodeName == "LI") {
            if (li.className != "yzj_active") {
              for (var i = 0; i < lis.length; i++) {
                if (lis[i] == li) {
                  break;
                }
              }
              moveTo(i);
              setTimeout(function () {
                canClick = true;
              }, duration);
            }
          }
        }
      };
    },
  },
  mounted() {
    // 加载网页标题
    this.loadTitle();

    // 加载大家都在看标签
    this.loadRandomlabel();

    // 加载猜你想找标签
    this.loadRandomlabel2();

    // 加载类别列表 请求图文数据
    this.loadCategory();

    // 加载精选文章列表和分页
    this.loadBestlist();

    // 加载热门top榜
    this.loadHotlist();

    // 加载轮播图
    this.loadBanner();
  },
};
</script>

<style scoped>
/* 袁自君补充的自己的公共样式 */
body {
  background-color: #fdfdfd;
}
a {
  text-decoration: none;
}
.clearfix::after {
  display: block;
  clear: both;
  content: "";
}
a,
span,
b,
i,
em {
  display: inline-block;
  font-style: normal;
}
/* 分页样式 */
.page {
  margin: 48px 0 72px;
  height: 36px;
  line-height: 36px;
  text-align: center;
  color: #333;
  font-size: 14px;
  display: flex;
  justify-content: center;
}
.page ul li {
  float: left;
}
.page ul li a {
  display: inline-block;
  width: 34px;
  height: 34px;
  border: 1px solid #ddd;
}
/* .page ul li:first-child a {
  pointer-events: none;
} */
.page ul li:first-child a,
.page ul li:last-child a {
  width: 80px;
  margin: 0 5px;
}
.page a:hover {
  color: #f83244;
}
.page li.yzj_active a {
  background: #f83244;
  color: #fff;
}
.page li.dot a {
  color: #333;
  border: 0;
  width: 17px;
}
/* 面包屑导航样式 */
.crumbs {
  margin-top: 15px;
  margin-bottom: 20px;
  font-size: 12px;
  color: #999;
}
.crumbs span i {
  color: #333;
  font-style: normal;
}
.crumbs span a {
  color: #999;
}
.crumbs span a:hover {
  color: #f83244;
}

img:hover {
  opacity: 0.8;
}
.background_image {
  width: 100%;
  height: 220px;
  background: url(../../public/img/yuanzj/strategy_index/background.jpg)
    no-repeat top center;
  background-size: cover;
}
.container {
  width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  top: -220px;
}

.box .box_left {
  float: left;
  width: 950px;
  height: 268px;
  background: url(../../public/img/yuanzj/strategy_index/box_bg.png);
  border-radius: 6px;
  box-shadow: 0 5px 20px 4px rgb(0 0 0 / 4%);
}
.box .box_left dl {
  float: left;
  margin: 0px 0px 0px 44px;
  width: 264px;
}
.box .box_left dt {
  display: block;
  margin-top: 50px;
  margin-bottom: 30px;
  color: #333;
  font-weight: bold;
  font-size: 24px;
}
.box .box_left dd {
  display: inline-block;
  width: 64px;
  height: 40px;
  line-height: 40px;
  margin-right: 20px;
  font-size: 16px;
}
.box .box_left dd a:hover {
  color: #f83244;
}
.box .box_right {
  float: right;
}

.recommend {
  margin: 15px 0 70px;
  height: 30px;
  line-height: 30px;
  font-size: 14px;
  display: flex;
}
.recommend p {
  color: #333;
  width: 106px;
  line-height: 10px;
  margin: 5px 0 5px 0;
  border-right: 1px solid #ccc;
}
.recommend p i {
  width: 16px;
  height: 16px;
  background: url(https://qnm.hunliji.com/o_1cv7oavb5k1m30l1nqi1urg13ue1o.png)
    no-repeat;
  background-size: cover;
  margin-right: 10px;
}
.recommend div a {
  color: #000;
  padding: 0 13px;
  margin: 0 0 10px 10px;
  background: #f5f5f5;
  border-radius: 20px;
}
.recommend div a img {
  vertical-align: middle;
}
.recommend div a i {
  margin-left: 6px;
  background: url(https://qnm.hunliji.com/o_1d5mcc04kd1i9e3rgtvgs1buk17.png);
  width: 7px;
  height: 12px;
  background-size: cover;
  margin-top: 10px;
  float: right;
}
.recommend div a:hover i {
  background-image: url(https://qnm.hunliji.com/o_1d5lmt82u1qnfbfgug3kejdgee.png);
}
.recommend div a:hover {
  color: #f83244;
}

.title ul {
  display: flex;
  justify-content: space-between;
  margin: 0 0 20px;
}
.title ul li {
  padding: 0 0 10px;
  border: 2px solid #fff;
}
.title ul li a {
  font-size: 20px;
  font-weight: bold;
  color: #333;
}
.title ul li.cate a {
  color: #f83244;
}
.title ul li.cate {
  border-bottom-color: #f83244;
}

.title_img {
  display: flex;
  justify-content: space-between;
  margin-bottom: 60px;
}
.title_img::after {
  content: "";
  flex: auto;
}
.title_img dl {
  width: 24%;
  margin-right: 16px;
}
.title_img dl:last-child {
  margin-right: 0;
}
.title_img dl a {
  width: 100%;
}
.title_img dl dt img {
  width: 100%;
  height: 178px;
  margin-bottom: 10px;
}
.title_img dl dd a {
  color: #000;
  font-size: 14px;
}
.title_img dl dd a:hover {
  color: #f83244;
}

.art_hot {
  display: flex;
}
.art_hot .lis {
  width: 820px;
}
.art_hot .lis .topic span a {
  display: inline-block;
  color: #333;
  font-size: 20px;
  font-weight: bold;
  padding: 0 0 10px 0;
  margin: 0 60px 0 0;
}
.art_hot .lis .topic span.yzj_active a {
  color: #f83244;
  border-bottom: 2px solid #f83244;
}

.lis .artlist {
  height: 152.33px;
  border-bottom: 1px solid #e8e8e8;
  padding-bottom: 24px;
  margin-top: 30px;
}
.lis .artlist li:first-child {
  float: left;
  margin-right: 10px;
}
.lis .artlist li:first-child img {
  width: 230px;
  height: 144px;
}
.lis .artlist li:not(:first-child) {
  width: 560px;
  float: right;
}
.lis .artlist .title {
  width: 560px;
  height: 24px;
}
.lis .artlist .title a.subcat {
  width: 60px;
  line-height: 24px;
  overflow: hidden;
  margin-right: 12px;
  border-radius: 3px;
  font-size: 12px;
  color: #fff;
  text-align: center;
  background: #fe7e33;
}
.lis .artlist .title a.subcat:hover {
  background: rgba(254, 126, 51, 0.85);
}
.lis .artlist .title a.stitle {
  width: 450px;
  line-height: 24px;
  font-size: 20px;
  color: #000;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: bold;
}
.lis .artlist .title a.stitle:hover {
  color: #f83244;
}
.lis .artlist .time_scan {
  padding-top: 12px;
  font-size: 12px;
  color: #666;
}
.lis .artlist .time_scan .scan {
  float: right;
}
.lis .artlist .time_scan .scan i {
  margin-right: 5px;
  margin-top: 1px;
  width: 16px;
  height: 14px;
  background: url(http://qnm.hunliji.com/o_1cjnffupn2qphg91mg2dhb1u8uf.png);
  float: left;
}

.lis .artlist .text a {
  height: 48px;
  width: 100%;
  font-size: 14px;
  color: #444;
  line-height: 24px;
  margin-top: 12px;
  float: left;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.lis .artlist .slabel {
  margin-top: 12px;
  display: flex;
}
.lis .artlist .slabel span {
  display: flex;
  align-items: center;
  background: #ebf9ff;
  border-radius: 10px;
  height: 20px;
  padding: 0 7px 0 2px;
  margin-right: 12px;
}
.lis .artlist .slabel img {
  height: 16px;
  width: 16px;
  margin: 0 3px 0 0px;
  vertical-align: middle;
}
.lis .artlist .slabel a {
  color: #13acec;
  font-size: 12px;
}
.lis .artlist .slabel a:hover {
  text-decoration: underline;
}

.yzj_banner {
  width: 820px;
  overflow: hidden;
  position: relative;
}
.yzj_banner img:hover {
  opacity: 1;
}
.yzj_banner #ul-imgs li {
  width: 820px;
  float: left;
}
.yzj_banner #ul-imgs img {
  width: 820px;
  height: 180px;
}
.yzj_banner #ul-imgs.transition {
  transition: all 0.5s linear;
}
.yzj_banner #ul-idxs {
  width: 60px;
  margin: 0 auto;
  position: absolute;
  left: 50%;
  margin-left: -30px;
  bottom: 8px;
}
.yzj_banner #ul-idxs > li {
  float: left;
  width: 10px;
  height: 10px;
  background-color: #fff;
  border-radius: 5px;
  margin: 0 5px;
  cursor: pointer;
}
#ul-idxs > li.yzj_active {
  background-color: #13acec;
}
#btn-left,
#btn-right {
  width: 60px;
  height: 100%;
  position: absolute;
  top: 0;
  cursor: pointer;
  opacity: 0.8;
}
#btn-left:hover,
#btn-right:hover {
  opacity: 1;
  background-size: 40px 70px;
}
#btn-left {
  background: url("../../public/img/yuanzj/strategy_index/left.png") no-repeat
    center;
}
#btn-right {
  right: 0;
  background: url("../../public/img/yuanzj/strategy_index/right.png") no-repeat
    center;
}

.art_hot .hot_list {
  width: 320px;
  margin-left: 30px;
}
h6 {
  color: #333;
  width: 320px;
  height: 24px;
  font-size: 24px;
  margin-bottom: 20px;
  font-weight: normal;
}

.hot_list ul {
  width: 350px;
  background: #fff;
  box-shadow: 0px 4px 28px rgb(0 0 0 / 12%);
  border-radius: 6px;
  padding: 24px 20px;
  font-size: 12px;
  color: #666;
}
.hot_list ul li {
  height: 20px;
  margin-bottom: 15px;
  /* overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; */
}
.hot_list ul li span:first-child {
  vertical-align: top;
  color: #fff;
  width: 20px;
  height: 20px;
  text-align: center;
  line-height: 20px;
  background: #ffd31b;
  border-radius: 2px;
  font-weight: bold;
  font-size: 12px;
}
.hot_list ul li:first-child span:first-child {
  background: #f83244;
}
.hot_list ul li:nth-child(2) span:first-child {
  background: #fe7e33;
}
.hot_list ul li:nth-child(3) span:first-child {
  background: #feaf24;
}
.hot_list ul li a {
  width: 200px;
  color: #333;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  margin: 0 16px 0 10px;
  font-size: 14px;
}
.hot_list ul li a:hover {
  color: #f83244;
}
.hot_list ul li span:last-child {
  vertical-align: top;
  height: 20px;
  line-height: 20px;
}
.hot_list ul li span i {
  height: 12px;
  width: 15px;
  background-size: 100%;
  background-image: url(https://qnm.hunliji.com/o_1dd2hb7l02sq102g160t8t1qn9.png);
  margin-right: 6px;
}
</style>
